// src/components/popups/adminEditPermission/EditPermissionConfirm.tsx

import type { FC } from 'react';
import { useState } from 'react';
import type { EditPermissionConfirmProps } from '@/types/types';
import { updateUserPermissions } from '@/services/PermissionService';

const EditPermissionConfirm: FC<EditPermissionConfirmProps> = ({
  email,
  newPermissions,
  onCancel,
  onSuccess,
}) => {
  const [loading, setLoading] = useState(false);

  const handleConfirm = async () => {
    setLoading(true);
    try {
      await updateUserPermissions(email, newPermissions);
      onSuccess();
    } catch (err: unknown) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
      alert('Failed to update permissions: ' + errorMessage);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60 dark:bg-black/80 backdrop-blur-sm p-1 sm:p-6 font-poppins" onClick={onCancel}>
      <div className="w-full max-w-md w-[98%] max-h-[90vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-3xl shadow-2xl dark:shadow-blue-900 border border-gray-100 dark:border-slate-800 animate-fade-in-up" onClick={e => e.stopPropagation()}>
        {/* Header */}
        <div className="px-4 sm:px-8 py-4 sm:py-6 bg-white dark:bg-slate-900 text-center border-b border-gray-200 dark:border-slate-800 rounded-t-3xl shadow-sm">
          <h3 className="text-xl sm:text-2xl font-extrabold text-blue-700 dark:text-cyan-300 tracking-tight">Confirm Update</h3>
        </div>
        {/* Body Content */}
        <div className="px-2 sm:px-6 py-6 text-center text-gray-800 dark:text-gray-100 text-sm sm:text-base space-y-6">
          <p>Are you sure you want to update permissions for:</p>
          <p className="font-semibold text-blue-600 dark:text-cyan-300 break-words text-sm sm:text-base">{email}</p>
          {/* Buttons */}
          <div className="flex flex-col sm:flex-row justify-center gap-4 pt-2">
            <button
              onClick={onCancel}
              disabled={loading}
              className="w-full sm:w-auto px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-cyan-300 border border-gray-300 dark:border-slate-700 bg-white dark:bg-slate-800 font-semibold transition"
            >
              Cancel
            </button>
            <button
              onClick={handleConfirm}
              disabled={loading}
              className="w-full sm:w-auto px-4 py-2 rounded-xl bg-blue-600 dark:bg-cyan-700 text-white hover:bg-blue-700 dark:hover:bg-cyan-800 font-semibold shadow transition flex items-center justify-center min-w-[100px]"
            >
              {loading ? (
                <>
                  <svg
                    className="animate-spin h-5 w-5 mr-2 text-white"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                      fill="none"
                    />
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8v8H4z"
                    />
                  </svg>
                  Updating...
                </>
              ) : (
                'Confirm'
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default EditPermissionConfirm;
